<template>
    <div class="app-container">
        <a-card class="warranty" title="质保查询">
            <div class="search-wrap">
                <a-spin tip="查询中..." :spinning="spinning">
                    <div class="search">
                        <a-input v-model:value="no" class="input" placeholder="请输入序列号查询" />
                        <a-button type="primary" @click="handleQuery">
                            <template #icon>
                                <SearchOutlined />
                            </template>
                            查询
                        </a-button>
                        <a-button @click="handleReset">
                            <template #icon>
                                <ReloadOutlined />
                            </template>
                            重置
                        </a-button>
                    </div>
                    <a-empty v-if="warranty.noResult" :description="text" />
                    <a-descriptions v-else bordered :column="1">
                        <a-descriptions-item label="序列号">{{ warranty.result.no }}</a-descriptions-item>
                        <a-descriptions-item label="设备编号">{{ warranty.result.code }}</a-descriptions-item>
                        <a-descriptions-item label="出厂日期">{{ warranty.result.productionDate }}</a-descriptions-item>
                        <a-descriptions-item label="有效期">{{ warranty.result.shelfLife }}月</a-descriptions-item>
                        <a-descriptions-item label="状态">{{ status(warranty.result.status) }}</a-descriptions-item>
                        <a-descriptions-item label="质保">
                            <a-tag v-if="quality" color="cyan">保质期内</a-tag>
                            <a-tag v-else color="red">保质期外</a-tag>
                        </a-descriptions-item>
                    </a-descriptions>
                </a-spin>
            </div>
        </a-card>
    </div>
</template>
<script setup name="WarrantyModule">
import { computed, reactive, ref } from 'vue'
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { search } from '/@/api/Inverter/Devices/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'
import { clone } from '@iframe/tools/utils/Tools.js'

const options = {
    0: '正常',
    1: '告警',
    2: '离线'
}

const no = ref()
const spinning = ref(false)
const warranty = reactive({
    noResult: true,
    search: false,
    result: {}
})

const text = computed(() => {
    return warranty.search ? '请输入序列号查询' : '未查询到该设备信息'
})

const status = computed(() => {
    return stat => {
        return options[stat]
    }
})

const quality = computed(() => {
    return dayjs().isBefore(dayjs(warranty.result.productionDate).add(warranty.result.shelfLife, 'month'))
})

const handleQuery = () => {
    if (!no.value) {
        message.warning('请输入设备序列号查询')
        return
    }
    if (!warranty.search) {
        warranty.search = true
    }
    spinning.value = true
    search({ no: no.value })
        .then(result => {
            if (result.code === SUCCESS_CODE && result.data) {
                warranty.noResult = false
                clone(warranty.result, result.data)
            } else {
                warranty.noResult = true
            }
            spinning.value = false
        })
        .catch(err => {
            console.error(err)
            spinning.value = false
        })
}

const handleReset = () => {
    no.value = null
    warranty.noResult = true
}
</script>
<style lang="less" scoped>
.warranty {
    height: 100%;
    .search-wrap {
        width: 465px;
        margin: 0 auto;
        .input {
            width: 280px;
        }
        :deep(.ant-btn) {
            margin-left: 10px;
        }
        .search {
            margin-bottom: 60px;
        }
    }
}
</style>
